<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
	<title>fileupload</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	
	<link rel="stylesheet" type="text/css" href="${resRoot}/css/index.css" />
	<script type="text/javascript" src="${resRoot}/js/common/jquery.min.js"></script>
	<script type="text/javascript" src="${resRoot}/js/common/jquery_form.js"></script>
	<script type="text/javascript" src="${resRoot}/js/common/common.js"></script>
	<script type="text/javascript" src="${resRoot}/js/common/fileupload.js"></script>
	
	<script src="${resRoot}/js/plugins/swfupload/swfupload.js"></script>
	<script src="${resRoot}/js/plugins/swfupload/swfupload_queue.js"></script>
	
	<script type="text/javascript">
		function logoImg(data, datatag) {
			$('#' + datatag).attr('src', data.url);
		}
		
		var swf_upload;
		//var select_count=10;
		var max_count = 10;//允许上传文件张数
		var photo_count=0;//已上传图片
		
		jQuery(document).ready(function(){
			 photo_count = 0;//填入已上传多少张图片
			 var settings_object = {//定义参数配置对象
		        upload_url : "${ctxPath}/upload/uploadImg",
	            flash_url : "${resRoot}/flash/swfupload.swf",
	            file_post_name : "imgFile",
	            use_query_string : false,
	            requeue_on_error : false,
	            file_types : "gif;jpg;png",
	            file_types_description: "商品图片",
	            file_size_limit : "2048",//文件夹大小限制
	            file_upload_limit : 0,
	            file_queue_limit : 0,
	            debug : false,
	            prevent_swf_caching : true,
	            preserve_relative_urls : false,     
	            button_placeholder_id : "upload_imgs",
	            button_image_url : "${resRoot}/img/spare_add_button.jpg",
	            button_width : 102,
	            button_height : 27,
	            button_text : "<b></b> <span class='upload_text'>上传图片</span>",
	            button_text_style : ".upload_text { color: #666666;font-size:12px;margin-left:30px; }",
	            button_text_left_padding : 3,
	            button_text_top_padding : 5,
	            button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
	            button_disabled : false,
	            button_cursor : SWFUpload.CURSOR.HAND,
	            button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
				file_dialog_start_handler:fileDialogStart,
				file_dialog_complete_handler:fileDialogComplete,
				file_queue_error_handler: fileQueueError,
	            upload_start_handler:upload_start_handler,
	            upload_success_handler:uploadSuccess,
				upload_complete_handler:uploadComplete
		    }; 															
		    swf_upload = new SWFUpload(settings_object);//实例化一个SWFUpload，传入参数配置对象	    
		});
		
		function upload_start_handler() {
		    jQuery("#upload_wait").show();
		}
		//单个图片上传成功
		function uploadSuccess(file, serverData) {
		    var obj = eval("(" + serverData + ")").data;
		    var storeimgs=$("#storeImgs");
		    var imgroot=storeimgs.attr('data-imgroot');
		    var img_url = obj.url;//imgroot + obj.filename + "."+ obj.ext;
		    if ($("#imgsPath").val() != '') {
		        $("#imgsPath").val($("#imgsPath").val() + "," + obj.id);
		    } else {
		        $("#imgsPath").val(obj.id);
		    }
		    var imgDiv = "<div id='" + obj.id + "' url='" + img_url + "' class='line_06_img_box'><div class='line_06_img'>" +
		        "<img src='" + img_url + "' width='110' height='110' />" +
		        "<div class='imgRemov'>" +
		        "<a href='javascript:removImgDiv(\"" + obj.id + "\");'>X</a></div></div></div>";
		    storeimgs.append(imgDiv);
		    photo_count++;
		}

		function uploadComplete(file) {
		    try {
		        if (this.getStats().files_queued == 0) {
		            jQuery("#upload_wait").hide();
		        } else {
		            if (this.getStats.successful_uploads >= max_count) {
		                this.cancelQueue();
		            } else {
		                this.startUpload();
		            }
		        }
		    } catch (ex) {
		        this.debug(ex);
		    }
		}

		function removImgDiv(imgDivId) {
		    var img_path = $("#imgsPath").val();
		    var pathArr = img_path.split(",");
		    var pIndex = pathArr.indexOf(imgDivId);
		    if (pIndex != -1) {
		        pathArr.splice(pIndex, 1);
		    }
		    $("#imgsPath").val(pathArr.join(","));
		    $("#" + imgDivId).remove();
		    photo_count--;
		}

		function fileDialogStart() {
		    var stats = this.getStats();
		    //stats.successful_uploads = 5 - select_count;
		    //this.setStats(stats);
		}

		function fileDialogComplete(numFilesSelected, numFilesQueued) {
		    try {
		        var upload = 0;
		        //var stats = this.getStats();
		        if (photo_count >= max_count) {
		            alert("上传已上限，最多上传" + max_count + "张图片");
		            this.cancelQueue();
		            upload = 1;
		        }
		        var select_count = max_count - photo_count; //还可以上传几张
		        if (select_count != 0 && numFilesSelected > select_count) {
		            alert("当前最多可以再上传" + select_count + "张商品图片");
		            this.cancelQueue();
		            upload = 1;
		        }
		        if (upload == 0) {
		            this.startUpload();
		        }
		    } catch (ex) {
		        this.debug(ex);
		    }
		}

		function fileQueueError(file, errorCode, message) {
		    try {
		        if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
		            alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
		            return;
		        }
		        switch (errorCode) {
		            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
		                alert("文件大小超过限制!");
		                break;
		            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
		                alert("不能上传0节字文件!");
		                break;
		            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
		                alert("不允许上传文件类型的文件!");
		                break;
		            default:
		                if (file !== null) {
		                    progress.setStatus("Unhandled Error");
		                }
		                alert("未知错误!");
		                break;
		        }
		    } catch (ex) {}
		}
	</script>
	
	
</head>
<body>
	<div>
		<img src="" id="logo_img" width="105" height="97" class="upimgbox" />
		<br /> <input type="file" onchange="autofileupload(this)"
			data-tag="logo_img" data-back="logoImg" 
			base-url="${ctxPath}" upload-uri="/upload/uploadImg" />
	</div>
	<div>
		<img id="upload_wait" style="display:none;" src="${resRoot}/img/loading.gif" />
		<span id="upload_imgs"></span>
		<input id="imgsPath" type="hidden" />
		<div id="storeImgs" class="form_right_line_06" data-imgroot="${picPath}">
		</div>
	</div>
	<div>
		<img src="" /><!-- ${ctxPath}/topic/getFile/2 -->
	</div>
</body>
</html>